<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Save a web scene - 4.6</title>

  <link rel="stylesheet" href="https://raw.githubusercontent.com/Esri/calcite-bootstrap/gh-pages/styles/calcite-bootstrap.css">

  <!-- Claro theme is used for initial dialog prompting OAuth sign-in-->
  <link rel="stylesheet" href="https://js.arcgis.com/4.6/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager",
      "esri/views/SceneView",
      "esri/WebScene",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      OAuthInfo, esriId, SceneView, WebScene, dom, on
    ) {

      var info = new OAuthInfo({
        // Swap this ID out with a registered application ID
        appId: "q244Lb8gDRgWQ8hM",
        // Uncomment the next line and update if using your own portal
        // portalUrl: "https://<host>:<port>/arcgis"
        // Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
        // authNamespace: "portal_oauth_inline",
        popup: true
      });
      esriId.registerOAuthInfos([info]);

      /************************************************************
       * Creates a new WebScene instance. A WebScene can reference
       * a PortalItem ID that represents a WebScene saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebScene from an on-premise portal, set the portal
       * url with esriConfig.portalUrl (see above).
       ************************************************************/
      var scene = new WebScene({
        portalItem: { // autocasts as new PortalItem()
          id: "90e3c30bdbbe4886a94f75c2cdd7edce"
        }
      });

      /************************************************************
       * Set the WebScene instance to the map property in a
       * SceneView.
       ************************************************************/
      var view = new SceneView({
        map: scene,
        container: "viewDiv",
        padding: {
          top: 40
        }
      });

      view.when(function() {
        // when the scene and view resolve, display the scene's
        // new title in the DOM
        var sidebar = dom.byId("sidebarDiv");
        var title = sidebar.getElementsByTagName("input")[0];
        var save = sidebar.getElementsByTagName("input")[1];

        title.value = "WebScene Saving Sample";
        save.disabled = false;

        var overlay = dom.byId("overlayDiv");
        var ok = overlay.getElementsByTagName("input")[0];

        function statusMessage(head, info) {
          (overlay.getElementsByClassName("head")[0]).innerHTML = head;
          (overlay.getElementsByClassName("info")[0]).innerHTML = info;
          overlay.style.visibility = "visible";
        }

        on(ok, "click", function() {
          overlay.style.visibility = "hidden";
        });

        on(save, "click", function() {
          // item automatically casts to a PortalItem instance by saveAs
          var item = {
            title: title.value,
          };

          // Update properties of the WebScene related to the view. This should be called just before saving a scene.
          scene.updateFrom(view);

          scene.saveAs(item)
            // Saved successfully
            .then(function(item) {

              // link to the newly-created web scene item
              var itemPageUrl = item.portal.url +
                "/home/item.html?id=" + item.id;
              var link = "<a target=\"_blank\" href=\"" +
                itemPageUrl + "\">" +
                title.value + "</a>";

              statusMessage("Save Webscene",
                "Successfully saved as <i>" + link +
                "</i>");
            })
            // Save didn't work correctly
            .otherwise(function(err) {
              statusMessage("Save Webscene", "Error " + err);
            });
        });
      });
    });
  </script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0 !important;
      height: 100%;
      width: 100%;
    }

    #sidebarDiv {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 300px;
    }

    #overlayDiv {
      z-index: 1;
      position: absolute;
      margin: auto auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 400px;
      height: 230px;
      padding: 10px;
      background-color: white;
      border: 1px solid grey;
      visibility: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 0;
      left: 300px;
      top: 0;
      bottom: 0;
    }

    .head,
    .info {
      margin: 0 auto;
      width: 100%;
      padding: 20px;
    }

    .info {
      font-size: 75%;
      font-weight: 200;
    }

    input[type="button"] {
      margin: 20px;
    }

    input[type="text"] {
      width: 100%;
    }

    h6 {
      margin: 0 !important;
    }
  </style>
</head>

<body class="claro">
  <div id="sidebarDiv">
    <label class="head">Save Webscene</label>
    <label class="info">Title:
      <input type="text">
    </label>
    <input type="button" value="Save" disabled>
  </div>
  <div id="overlayDiv">
    <label class="head"></label>
    <label class="info"></label>
    <input type="button" value="Ok">
  </div>
  <div id="viewDiv"></div>
</body>

</html>